<template>
  <div class="_page">
    <div class="cnt">
		<div class="banner">
			<el-carousel :height="settingStore.vertical ? '800px':'400px'">
			  <el-carousel-item v-for="item in advertises" :key="item">
				<div class="_img">
					<img :src="previewUrl + item.imgUrl" alt="" srcset="">
					<div class="word">
						<p v-html="item.title.split(' ').join('<br>')"></p>
						<span>{{ item.des }}</span>
					</div>
				</div>
			  </el-carousel-item>
			</el-carousel>
		
			<!-- <div class="search">
				<el-select v-model="value1" multiple class="_select" suffix-icon="CaretBottom">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
				</el-select>
				<el-select v-model="value1" multiple class="_select" suffix-icon="CaretBottom">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
				</el-select>
				<button>SEARCH BOATS</button>
			</div> -->
		</div>
	  
		<div class="advices">
			<div v-for="(item, idx) in advices" :key="idx" class="advice" @click="gotoDetail(item)">
				<div class="advice_cnt">
					<div class="info" :style="`background-color: ${colorArr[idx % 5]}`" :class="{reverse: idx % 2 == 0}">
						<span class="name">{{ item.model }}</span>
						{{ item.feature }}
					</div>
					<div class="img">
						<img :src="previewUrl + item.mainImageUrl" alt="">
					</div>
				</div>
			</div>
		</div>

		<div class="brandArea">
			<h1>DISTRIBUTOR FOR THE WORLD’S LEADING BRANDS</h1>
			<div class="brands">
				<div v-for="(item, idx) in brands" :key="idx" class="brand" @click="gotoBrandList(item)">
					<img :src="previewUrl + item.brandLogoUrl" alt="" srcset="">
				</div>
			</div>
		</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { ref, onMounted, nextTick } from 'vue'
import { adviseGetAll } from '@/api/website/advise'
import { settingGetInfo } from '@/api/system/setting'
import echarts from '@/components/echarts'
import { useSettingStore } from '@/store/modules/setting'
import { useRouter, useRoute } from 'vue-router'
import { brandGetAll } from '@/api/boat/brand'

let $router = useRouter()

let userStore = useUserStore()
let settingStore = useSettingStore()
const previewUrl = ref(import.meta.env.VITE_IMG_SERVE)
const colorArr = ['#b5b6b7', '#b0c5d8', '#3c3c3c', '#157aac', '#33434d']
onMounted(async () => {
	window.addEventListener('scroll', scrollHandle)
	getSetting()
  	getBrands()
	await getAdvise()
	nextTick(() => {
		init()
		scrollHandle()
	})
})

let brands = ref([])
const getBrands = async () => {
  let { status, data } = await brandGetAll()

  if (status == 200) {
    brands.value = data
  }
}

let adviceEls = []
const init = () => {
	adviceEls = document.querySelectorAll('.advice')
	for (var i = 0; i < adviceEls.length; i++) {
		let el = adviceEls[i]
		console.log(el.getBoundingClientRect());
	}
}
const scrollHandle = () => {
	const viewportHeight = window.innerHeight || document.documentElement.clientHeight
	for (var i = 0; i < adviceEls.length; i++) {
		let el = adviceEls[i]
		
		
		if (el.getBoundingClientRect().top <= viewportHeight) {
			el.classList.add('shown')
		} else {
			el.classList.remove('shown')
		}
	}
}
let advertises = ref([])
let advices = ref([])
const getSetting = async () => {
	try{
		let { status, data } = await settingGetInfo()
		if (status == 200) {
			let arr = []
			if (data.imgs) {
				arr = JSON.parse(data.imgs)
			}
			advertises.value = arr
		}
	}catch(e){
		//TODO handle the exception
	}
}
const getAdvise = async () => {
	try{
		let { status, data = [] } = await adviseGetAll()
		if (status == 200) {
			advices.value = data
			
		}
	}catch(e){
		//TODO handle the exception
	}
}

const gotoDetail = (row) => {
	$router.push({
		path: '/boats/detail',
		query: {
			id: row.vesselsId
		}
	})
}

const gotoBrandList = (row) => {
	$router.push({
		path: '/boats/brands',
		query: {
			...row,
			brandId: row.id
		}
	})
}

</script>

<style lang="scss" scoped>
$same_color: $theme-primary;
._page {
	width: 100%;
	overflow: hidden;
}
.cnt {
  /* width: 50%; */
  /* min-width: 600px; */
  
  .banner {
	  position: relative;
	  width: 100%;
	  
	  .search {
		  display: flex;
		//   flex-wrap: wrap;
		  align-items: center;
		  position: absolute;
		  background-color: #fff;
		  height: 56px;
		  bottom: 40px;
		  left: 50%;
		  transform: translateX(-50%);
		  padding-left: 10px;
		  
		  ._select {
			  width: 150px;
			  margin: 0 10px;
		  }
		  
		  button {
			background-color: $same_color;
			border: 0;
			color: #fff;
			height: 100%;
			padding: 0 20px;
			margin-left: 20px;
			word-break: keep-all;
			white-space: nowrap;
		  }
	  }
  }

	.advices {
		
	}
	.advice {
		// height: 600px;
		// max-height: 600px;
		// background-color: #475669;
		margin: 20px 0;

		.advice_cnt {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;

			.info {
				transform: translateX(-50%);
				opacity: 0;
				transition: all 2s;
				width: 40%;
				background-color: #475669;
				color: #fff;
				padding: 5%;
				line-height: 1.67;

				&.reverse {
					order: 1;
					transform: translateX(50%);
				}
			}

			.img {
				width: 60%;
				overflow: hidden;
			}

			img {
				display: block;
				width: 100%;
				height: 100%;
				// height: fit-content;
				transform: translateY(50%);
				transition: all 2s;
				object-fit: cover;
				// background-color: #475669;
				min-height: 600px;

				&:hover {
					transition: all .5s;  
					transform: scale(1.1);
				}
			}
		}
		
		
		.name {
			display: block;
			color: #fff;
			font-size: 2rem;
			transition: all 2s;
			text-align: center;
		}
		
		&.shown{
			.advice_cnt {
				.info {
					transform: translateX(0);
					opacity: 1;
				}
			}
			img {
				transform: translateY(0);
			}
		} 
	}

	.brandArea {
		margin-top: 100px;
		h1 {
			text-align: center;
			font-size: 1.7rem;
			color: #545f6d;
			margin: 20px 0;
		}
	}

	.brands {
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		margin: 0 auto;
		max-width: 1000px;

		.brand {
			margin: 0 10px;
			width: 30%;
			min-height: 100px;
			img {
				width: 100%;
				object-fit: contain;
				cursor: pointer;
			}
		}
	}
}
._img {
	width: 100%;
	height: 100%;
	position: relative;
	
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		
	}
	
	.word {
		position: absolute;
		left: 60px;
		top: 30%;
		color: #fff;
		p {
			font-size: 5vw;
			font-weight: 800;
			white-space: pre;
			line-height: 1;
			margin-bottom: 20px;
		}
		span {
			display: block;
			font-size: 1.6rem;
			max-width: 350px;
			word-break: break-all;
		}
	}
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

::v-deep .el-carousel__button {
	height: 10px;
}
::v-deep .el-carousel__indicators--horizontal {
	bottom: 100px !important;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

@media (max-width: 768px) { 
	.cnt {
		.advice {

			.advice_cnt {
				
				.info {
					width: 100%;
					order: 1;
					padding: 10px;
					height: fit-content;
				}
				.img {
					width: 100%;
					height: 500px;
				}
			}
		}

		.brands {
			
			.brand {
				width: 43%;
			}

		}
	}
	._img {

		.word {
			left: 10px;
			top: 30%;
			p {
				font-size: 3rem;
			}
		}
	}
}
</style>

<style lang="scss">
$same_color: $theme-primary;
::v-deep .el-select__wrapper {
	box-shadow: 0 0 0 #fff;
	border-bottom: 1px solid $same_color;
	border-radius: 0 !important;
	color: $same_color;
}
::v-deep .el-select__wrapper.is-hovering:not(.is-focused) {
	box-shadow: 0 0 0 #fff !important;
	
}
::v-deep .el-select__prefix, .el-select__suffix {
	color: $same_color !important;
	
}
::v-deep .el-select__caret {
	color: $same_color !important;
}
::v-deep .el-select__placeholder.is-transparent {
	color: $same_color !important;
}
</style>